<template>
	<view>
		<view class="attendance-flow-container" @tap="closeEllipsisTip">
			<view class="attendance-flow-top">
				<u-tabs
					:list="tabList"
					:activeStyle="{
						color: '#0071F7',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					@change="changeTab"
					:current="current"
					:scrollable="false"
				></u-tabs>
			</view>
			<view class="attendance-flow-content">
				<view class="content-top">
					<view class="choose-date">
						<picker :value="currentIndex" class="picker-container" range-key="name" :range="rangeList" mode="selector" @change="changeSelector">
							<view class="date-container">
								<view>{{ selectVal }}</view>
								<view class="down-arrow"></view>
							</view>
						</picker>
					</view>
					<view class="attendance-person">考勤人数：{{ attendanceTotal }}/{{ rosterTotal }}</view>
				</view>
				<scroll-view
					class="scroll-view"
					scroll-y
					:show-scrollbar="false"
					enhanced
					scroll-with-animation
					enable-passive
					fast-deceleration
					:bounces="false"
					refresher-enabled
					:refresher-triggered="isPullRefresh"
					@refresherrefresh="refreshList"
					@scrolltolower="getProjectAttendanceDaily"
					enable-flex
					@scroll="closeEllipsisTip"
				>
					<view class="attendance-flow-list" v-if="attendanceRecordList.length != 0">
						<view class="attendance-flow-item" v-for="(item, index) in attendanceRecordList" :key="index">
							<view class="item-top">
								<view class="top-left">
									<view class="person-info">
										<text class="name">{{ item.rosterName }}</text>
										<text class="work-type">{{ item.editWorkType }}</text>
										<text class="work-type-text" v-if="item.worktypeOrStationName">{{ item.worktypeOrStationName }}</text>
									</view>
									<view class="org-container" @tap="showOrg" :data-index="index">
										<view class="show-org" :id="'showOrg-' + index">{{ item.orgName }}</view>
										<view class="hidden-org" :id="'hiddenOrg-' + index">{{ item.orgName }}</view>
									</view>
								</view>
								<preview-image :avatar="item.imgUrl" preview-class="top-right" class="preview-image-container"></preview-image>
							</view>

							<view class="item-bottom">
								<view class="bottom-left">
									<image class="attendance-icon" :src="zhajiImg" v-if="item.deviceType === 1"></image>
									<image class="attendance-icon" :src="yidongImg" v-if="item.deviceType === 2"></image>
									<image class="attendance-icon" :src="zidongImg" v-if="item.deviceType === 3"></image>
									<image class="attendance-icon" :src="outSendImg" v-if="item.deviceType === 4"></image>
									<image class="attendance-icon" :src="xiaochengxuImg" v-if="item.deviceType === 5"></image>
									<text class="attendance-address">{{ item.signalName }}</text>
								</view>
								<view class="bottom-right">
									<text :class="'tag ' + item.flagObj.colorClass">{{ item.flagObj.text }}</text>
									<text>{{ item.editRecordTime }}</text>
								</view>
							</view>
						</view>
						<view class="no-more">没有更多了</view>
					</view>
					<view class="no-data-container" v-else>
						<no-data></no-data>
					</view>
				</scroll-view>
			</view>
		</view>

		<ellipsis-tip ref="ellipsisTip" :content="tipContent" :right="right" id="ellipsisTip"></ellipsis-tip>
	</view>
</template>

<script>
import commonIcon from '@/pagesA/components/common/icon/icon';
import noData from '@/pagesA/components/common/no-data/no-data';
import previewImage from '@/pagesA/components/common/preview-image/preview-image';
import ellipsisTip from '@/pagesA/components/common/ellipsis-tip/ellipsis-tip';
// import zhajiImg from '@/pagesA/assets/image/zha-ji.png';
// import yidongImg from '@/pagesA/assets/image/yi-dong.png';
// import zidongImg from '@/pagesA/assets/image/zi-dong.png';
// import outSendImg from '@/pagesA/assets/image/out-send.png';
// import xiaochengxuImg from '@/pagesA/assets/image/xiao-cheng-xu.png';
import { common } from '@/pagesA/utils/common.js';
import moment from 'moment';
export default {
	components: {
		commonIcon,
		noData,
		previewImage,
		ellipsisTip
	},
	data() {
		return {
			attendanceTotal: 0,
			rosterTotal: 0,
			zhajiImg: common.imgs.zhajiImg,
			yidongImg: common.imgs.yidongImg,
			zidongImg: common.imgs.zidongImg,
			outSendImg: common.imgs.outSendImg,
			xiaochengxuImg: common.imgs.xiaochengxuImg,
			attendanceRecordList: [],
			orginAttendanceRecord: [],
			pageNum: 1,
			pageSize: 20,
			code: '',
			projectUuid: '',
			personType: '',
			isPullRefresh: false,
			noMore: false,
			tipContent: '',
			right: 0,
			tabList: [
				{
					name: '管理人员',
					code: '10'
				},
				{
					name: '班组长',
					code: '30'
				},
				{
					name: '建筑工人',
					code: '20'
				}
			],
			recordObj: {
				0: {
					index: 0,
					selectVal: '全部',
					hasRender: false
				},
				1: {
					index: 0,
					selectVal: '全部',
					hasRender: false
				},
				2: {
					index: 0,
					selectVal: '全部',
					hasRender: false
				}
			},
			current: 0,
			rangeList: [],
			currentIndex: 0,
			selectVal: ''
		};
	},
	watch: {
		current(newVal) {
			console.log(newVal);
		}
	},
	onLoad(options) {
		this.projectUuid = !options.projectUuid || options.projectUuid == 'undefined' || options.projectUuid == 'null' ? '' : options.projectUuid;
		this.current = Number(options.index);
		this.changeTab({
			index: this.current
		});
		const windowInfo = uni.getWindowInfo();
		this.right = (windowInfo.screenWidth - 300 / windowInfo.pixelRatio) / 2;
	},
	onShow() {},
	methods: {
		setRecordObjValue() {
			this.recordObj[this.current].index = this.currentIndex;
			this.recordObj[this.current].selectVal = this.selectVal;
		},
		changeTab({ index }) {
			this.currentIndex = this.recordObj[index]?.index || 0;
			this.selectVal = this.recordObj[index]?.selectVal || '';
			this.personType = this.tabList[index].code;
			if (!this.recordObj[index].hasRender) {
				this.getRangeList();
				this.refreshList();
				this.recordObj[index].hasRender = true;
			}
		},
		changeSelector(e) {
			this.currentIndex = Number(e.detail.value);
			this.selectVal = this.rangeList[e.detail.value].name;
			this.code = this.rangeList[e.detail.value].code;
			this.setRecordObjValue();
			this.refreshList();
		},
		getRangeList() {
			//获取下拉菜单
			let params = {
				projectUuid: this.projectUuid,
				personType: this.personType
			};
			!params.projectUuid && delete params.projectUuid;
			!params.code && delete params.code;
			common.apis.projectSurvey.getStationOrWorkType(params).then((res) => {
				this.rangeList = res.data;
				this.rangeList.unshift({
					name: '全部',
					code: ''
				});
			});
		},
		handleInOrOut(code) {
			if (code == 0) {
				return {
					colorClass: 'out',
					text: '出'
				};
			} else if (code == 1) {
				return {
					colorClass: 'in',
					text: '进'
				};
			} else {
				return {
					colorClass: '',
					text: ''
				};
			}
		},
		handleWorkTypeName(personType) {
			if (personType) {
				if (personType == '10') {
					return '管理人员';
				} else if (personType == '30') {
					return '班组长';
				}
			}
			return '建筑工人';
		},
		handleTime(time, format = 'HH:mm:ss') {
			if (!time) {
				return;
			}
			return moment(time).format(format);
		},
		refreshList() {
			this.pageNum = 1;
			this.noMore = false;
			this.isPullRefresh = true;
			this.attendanceRecordList = [];
			this.orginAttendanceRecord = [];
			this.getProjectAttendanceDaily();
		},
		getProjectAttendanceDaily() {
			if (this.noMore) {
				return;
			}
			let params = {
				projectUuid: this.projectUuid,
				personType: this.personType,
				code: this.code,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			!params.projectUuid && delete params.projectUuid;
			!params.code && delete params.code;
			common.apis.projectSurvey.attendanceRecordListPage(params).then(
				(res) => {
					uni.hideLoading();
					let attendanceRecordList = res.data.attendanceRecordList;
					for (let item of attendanceRecordList) {
						item.editWorkType = this.handleWorkTypeName(item.personType);
						item.flagObj = this.handleInOrOut(item.inOrOut);
						item.editRecordTime = this.handleTime(item.recordTime);
					}
					this.attendanceTotal = res.data.attendanceTotal;
					this.rosterTotal = res.data.rosterTotal;
					this.pageNum += 1;
					this.isPullRefresh = false;
					this.noMore = attendanceRecordList.length < this.pageSize;
					this.attendanceRecordList = this.attendanceRecordList.concat(attendanceRecordList);
					this.orginAttendanceRecord = this.orginAttendanceRecord.concat(attendanceRecordList);
					this.calculateTexts();
				},
				() => {
					this.isPullRefresh = false;
					this.noMore = false;
				}
			);
		},
		calculateTexts() {
			const hiddenQuery = uni.createSelectorQuery();
			const showQuery = uni.createSelectorQuery();
			this.orginAttendanceRecord.forEach((item, index) => {
				hiddenQuery.select(`#hiddenOrg-${index}`).boundingClientRect();
				showQuery.select(`#showOrg-${index}`).boundingClientRect();
				hiddenQuery.exec((res) => {
					if (!res[index]) {
						return;
					}
					let hiddenText = res[index].height;
					showQuery.exec((showRes) => {
						if (!showRes[index]) {
							return;
						}
						if (hiddenText > showRes[index].height) {
							item.isCollapsed = true;
							this.orginAttendanceRecord[index] = item;
						}
					});
				});
			});
		},
		showOrg(e) {
			const index = e.currentTarget.dataset.index;
			if (this.orginAttendanceRecord[index] && this.orginAttendanceRecord[index].isCollapsed) {
				uni.createSelectorQuery()
					.in(uni)
					.select(`#showOrg-${index}`)
					.boundingClientRect((rect) => {
						this.tipContent = this.orginAttendanceRecord[index].orgName;
						this.$refs.ellipsisTip.openTips(rect.top);
					})
					.exec();
			}
		},
		closeEllipsisTip(e) {
			let content = e.target.dataset.content;
			if (!content) {
				//点击非省略组件，关闭
				this.$refs.ellipsisTip.closeTip();
			}
		}
	}
};
</script>
<style>
.attendance-flow-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f6f7fa;
}

.attendance-flow-top {
	background-color: #fff;
	padding: 16rpx 32rpx;
}

.attendance-flow-top .seach-input-container {
	background: #eff1f6;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
}

.seach-input-container .search-ipt {
	margin-left: 12rpx;
}

.seach-input-container .clear-icon {
	margin-left: auto;
}

.attendance-flow-content {
	flex: 1;
	height: 0;
	display: flex;
	flex-direction: column;
}

.attendance-flow-content .content-top {
	display: flex;
	align-items: center;
	padding: 24rpx;
}

.content-top .choose-date {
	background-color: #fff;
	border: 1rpx solid #b0aebf;
	width: 340rpx;
	box-sizing: border-box;
	border-radius: 8rpx;
	padding: 12rpx 12rpx 12rpx 24rpx;
}

.choose-date .date-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	height: 32rpx;
}
.down-arrow {
	width: 12rpx;
	height: 12rpx;
	border-top: 2rpx solid #767a87;
	border-left: 2rpx solid #767a87;
	transform: rotate(-135deg) translateY(-2rpx) translateX(6rpx);
}
.content-top .attendance-person {
	margin-left: auto;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}

.scroll-view {
	flex: 1;
	height: 0;
}

.attendance-flow-list {
	margin: 0 24rpx;
}

.attendance-flow-item {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx 24rpx 24rpx 32rpx;
	margin-bottom: 24rpx;
}

.attendance-flow-item .item-top,
.attendance-flow-item .item-bottom {
	display: flex;
	align-items: center;
}

.attendance-flow-item .item-top {
	align-items: flex-start;
}

.item-top .top-left {
	flex: 1;
}

.top-left .person-info {
	display: flex;
	align-items: center;
}

.person-info .name {
	max-width: 180rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
	word-break: break-all;
}

.person-info .work-type {
	flex-shrink: 0;
	margin-left: 16rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	text-align: center;
}

.person-info .work-type-text {
	flex: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 0;
	margin-left: 16rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	padding: 4rpx 16rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	text-align: center;
}

.top-left .org-container {
	margin-top: 24rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	text-align: justify;
}

.org-container .show-org {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
}

.org-container .hidden-org {
	position: absolute;
	top: -999px;
	visibility: hidden;
	color: transparent;
	width: 460rpx;
}

.item-top .preview-image-container {
	width: 128rpx;
	height: 128rpx;
	border-radius: 8rpx;
	margin-left: 50rpx;
	border: 1px solid #c8d1ed;
	align-self: center;
}

.item-top .top-right {
	width: 128rpx;
	height: 128rpx;
	border-radius: 8rpx;
}

.item-bottom {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
	margin-top: 24rpx;
}

.item-bottom .bottom-left,
.item-bottom .bottom-right {
	display: flex;
	align-items: center;
}

.bottom-left {
	flex: 1;
	overflow: hidden;
	margin-right: 40rpx;
}

.bottom-left .attendance-icon {
	flex-shrink: 0;
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}

.bottom-left .attendance-address {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bottom-right {
	margin-left: auto;
}

.bottom-right .tag {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	font-size: 22rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8rpx;
}

.bottom-right .in {
	background: #65c344;
}

.bottom-right .out {
	background: #ff943d;
}

.no-more {
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
	text-align: center;
	padding-bottom: 24rpx;
}

.no-data-container {
	height: 100%;
}
</style>
